﻿@page "/TextBox/Multiline-TextBox"

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates the multiline functionalities of the <code>Textbox</code> component. Enter or fill the textbox with multiple rows of text. Choose the corresponding option from the property panel to update the multiline textbox.</p>
</SampleDescription>
<ActionDescription>
   <p> The Multiline Textbox is used to edit or display multiple lines of text that helps you to accept address, description, comments, feedbacks, and more in a form. In this sample, multiline textbox is rendered from the <b>textarea</b> tag and the following options are available to customize it:</p>
    <p><ul><li>Choose float label types either 'Always', or 'Auto' to float the placeholder text.</li>
            <li>To make a read-only multiline textbox, check the 'Read only' option.</li>
            <li>Disable the textbox by checking the 'Disabled' option.</li>
            <li>Change the number of rows count to restrict the length of the input.</li>
    </ul></p>
    <p> More information on the multiline feature can be found in the <a href='https://blazor.syncfusion.com/documentation/textbox/multiline/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section col-lg-12 multiline">
    <div class="col-lg-8">
        <div class="content wrapper">
            <SfTextBox Placeholder="Enter your address" Enabled="@checkDisabled" Readonly="@checkReadonly" FloatLabelType="@FloatLabel" Multiline="true"></SfTextBox>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="content property-section">
            <div class="property">Properties</div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <div class="selectionText">Float Label Type </div>
                        </td>
                        <td>
                            <div>
                                <SfDropDownList TValue="string" TItem="FloatTypes" DataSource="@Data" @bind-Index="@index">
                                    <DropDownListEvents TItem="FloatTypes" TValue="string" ValueChange="OnChangeLabelType"></DropDownListEvents>
                                    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="selectionText">Disabled </div>
                        </td>
                        <td>
                            <div>
                                <SfCheckBox ValueChange="OnEnabledChange" TChecked="bool"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="selectionText">Read only</div>
                        </td>
                        <td>
                            <div>
                                <SfCheckBox ValueChange="OnReadonlyChange" TChecked="bool"></SfCheckBox>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{

    public FloatLabelType FloatLabel { get; set; } = FloatLabelType.Auto;
    private bool checkDisabled { get; set; } = true;
    private bool checkReadonly { get; set; } = false;

    public class FloatTypes
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }

    private List<FloatTypes> Data = new List<FloatTypes>() {
        new FloatTypes(){ ID= "Auto", Text= "Auto" },
        new FloatTypes(){ ID= "Always", Text= "Always" }
    };
    private int? index { get; set; } = 0;
    public void OnChangeLabelType(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FloatTypes> args)
    {
        this.FloatLabel = (FloatLabelType)Enum.Parse(typeof(FloatLabelType), (args.Value));
    }

    public void OnEnabledChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.checkDisabled = !args.Checked;
    }
    public void OnReadonlyChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.checkReadonly = args.Checked;
    }
}

<style>
    .control-section.multiline {
        margin-top: 20px;
    }

    .wrapper {
        width: 45%;
        margin-left: 200px;
    }

    .selectionText {
        margin: 10px;
        width: 100px;
        font-size: 13px;
    }

    .apply-limit {
        margin-top: 10px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }

    .property {
        padding-left: 10px;
        padding-bottom: 20px;
        font-weight: 600;
        font-size: 15px;
    }
</style>
